<template>
  <el-form ref="form"
    :model="p"
    :rules="rules"
    label-position="right"
    label-width="140px"
    class="form">
    <el-form-item :label="$t('table.user.oldPassword')"
      prop="oldPassword">
      <el-input v-model="p.oldPassword"
        type="password" />
    </el-form-item>
    <el-form-item :label="$t('table.user.newPassword')"
      prop="newPassword">
      <el-input v-model="p.newPassword"
        type="password" />
    </el-form-item>
    <el-form-item :label="'再次确认新密码'"
      prop="confirmPassword">
      <el-input v-model="p.confirmPassword"
        type="password" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
        plain
        :loading="buttonLoading"
        @click="submit"
        style="width: 120px">{{ $t('common.edit') }}</el-button>
    </el-form-item>
    <el-row>
      <el-col :span="24"
        style="
              margin: 5% 0%;
              border: 1px dashed #f53d3d;
              padding: 10px;
              font-size: 13px;
            ">
        <span style="color: red">*</span>
        新密码长度为8~16位，必须包含大小写字母、数字和特殊字符，特殊符号只支持!@#$%^&*
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { validLoginPassWord } from '@/utils/my-validate'
export default {
  data () {
    return {
      buttonLoading: false,
      p: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      rules: {
        oldPassword: [
          {
            required: true,
            message: this.$t('rules.require'),
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              let Base64 = require('js-base64').Base64
              // const password = Base64.encode(value)
              const password = value

              this.$get('system/user/password/check', {
                password: password,
              })
                .then((r) => {
                  if (r.data) {
                    callback()
                  } else {
                    callback(this.$t('tips.oldPasswordIncorrect'))
                  }
                })
                .catch(() => {
                  callback()
                })
            },
            trigger: 'blur',
          },
        ],
        newPassword: [
          {
            required: true,
            message: this.$t('rules.require'),
            trigger: 'blur',
          },
          {
            min: 8,
            max: 16,
            message: '输入的新密码不正确，长度在8到16个字符',
            trigger: 'blur',
          },

          {
            validator: (rule, value, callback) => {
              if (!validLoginPassWord(value)) {
                callback(
                  '输入的新密码不正确，必须包含大小写字母、数字和特殊字符，特殊符号只支持!@#$%^&*'
                )
              }
            },
            trigger: 'blur',
          },
        ],
        confirmPassword: [
          {
            required: true,
            message: this.$t('rules.require'),
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (this.p.newPassword !== value) {
                callback(this.$t('tips.notEqual'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          let Base64 = require('js-base64').Base64
          // const newPassword = Base64.encode(this.p.newPassword)
          const newPassword = this.p.newPassword
          this.$put('system/user/password', {
            password: newPassword,
          }).then(() => {
            this.buttonLoading = false
            this.$message({
              message: this.$t('tips.updateSuccess'),
              type: 'success',
            })
            this.$refs.form.clearValidate()
            this.$refs.form.resetFields()
          })
        } else {
          return false
        }
      })
    },
  },
}
</script>
